<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<title>产品分类</title>
		<link rel="stylesheet" type="text/css" href="../css/aui.css"/>
        <link rel="stylesheet" type="text/css" href="../css/api.css"/>
        <link rel="stylesheet" href="../css/loaders.css"/>
		<style>
            .aui-bar {
                background-color: #6ac82c;
            }
			.search {
				height: 35px;
				background-color: #f2f2f2;
				border-radius: 35px;
				font-size: 16px;
				color: #999;
				line-height: 35px;
			}
			.search span {
				font-size: 16px;
				margin: 0 10px 0 15px;
			}
			.title-content {
                width: 100%;
				padding:12px 15px;
				position: absolute;
				z-index: 1;
				top: 45px;
				left: 0;
				background-color: #fff;
			}
			.title-content:after {
				content: '';
				display: block;
				width: 100%;
				position: absolute;
				bottom: 0;
				left: 0;
				z-index: 1;
				border-top: 1px solid #dfdfdf;
			}
			.search .input {
				-webkit-box-flex: 1;
				box-flex: 1;
			}
			.search .input input {
				padding: 0 0 0 5px;
				margin: 0;
				height: 30px;
				line-height: normal;
				border: none;
				outline: none;
				background-color: rgba(0,0,0,0);
				font-size: 14px;
			}
			.content {
				display: -webkit-box;
				display: box;
				height: 100%;
			}
			.content .left {
				-webkit-box-flex: 1;
				box-flex: 1;
				width: 100px;
				max-width: 100px;
				height: 100%;
				background-color: #f2f2f2;
			}
			.content .right {
				-webkit-box-flex: 1;
				box-flex: 1;
			}
			.content .left .top, .content .right .top {
				height: 59px;
			}
			.content .right {
				-webkit-box-flex: 1;
				box-flex: 1;
				padding-left: 20px;
			}
			.left-item {
				text-align: center;
				padding: 10px 0;
				position: relative;
			}
			.left-item span {
				width: 45px;
				height: 45px;
			}
			.left-item p {
				color: #333;
				line-height: normal;
				font-size: 15px;
			}
			.left-item .item-img1 {
				background: url('../image/icon-img1.png') center no-repeat;
				background-size: cover;
			}
			.left-item .item-img2 {
				background: url('../image/icon-img2.png') center no-repeat;
				background-size: cover;
			}
			.left-item .item-img3 {
				background: url('../image/icon-img3.png') center no-repeat;
				background-size: cover;
			}
			.left-item .item-img4 {
				background: url('../image/icon-img4.png') center no-repeat;
				background-size: cover;
			}
			.actives {
				background-color: #dfdfdf;
			}
			.list-view {
				overflow: hidden;
				height: 80px;
				line-height: 60px;
				padding: 10px;
				position: relative;
			}
			.list-item{
				display:none;
			}
			.list-view:active {
				background-color: #f2f2f2;
			}
			.list-view:after {
				content: '';
				display: block;
				width: 100%;
				position: absolute;
				bottom: 0;
				left: 0;
				z-index: 1;
				border-top: 1px solid #f2f2f2;
			}
			.list-view img {
				float: left;
				height: 100%;
				display: block;
			}
			.list-view p {
				float: left;
				font-size: 16px;
				color: #333;
				margin-left: 20px;
				letter-spacing:-1px;
			}
			.list-view span {
				float: right;
				font-size: 20px;
				margin-right: 10px;
				color: #ccc;
			}
			.display{
				display:block;
			}

            #main{
                opacity: 0;
                transition: all 0.5s ease;
            }
            .mask{
                width: 100px;
                height: 100px;
                left: 50%;
                top: 50%;
                margin-left: -50px;
                margin-top: -50px;
                position: absolute;
            }
            .loader{
                width: 50px;
                height: 50px;
                left: 18px;
                top: 20px;
                position: absolute;
            }
            .loader-inner div{
                width: 60px;
                height: 60px;
                background-color: #6ac82c;
            }
		</style>
	</head>
	<body>
    <div class="mask">
        <div class="loader">
            <div class="loader-inner ball-scale">
                <div></div>
            </div>
        </div>
    </div>
    <div id="main">
    <header id="header" class="aui-bar aui-bar-nav">
        <div id="header-title" class="aui-title">
            产品分类
        </div>
    </header>
		<div class="title-content">
			<div class="search" onclick="openSearchWin()">
				<span class="aui-iconfont aui-icon-search"></span>输入食材名...
			</div>
		</div>
		<div class="content">
			<div class="left">
				<div class="top"></div>
				<div id="left-item1" class="left-item actives" target='list-view1'>
					<span class="item-img1"></span>
					<p>
						新鲜水果
					</p>
				</div>
				<div id="left-item2" class="left-item" target='list-view2'>
					<span class="item-img2"></span>
					<p>
						水产海鲜
					</p>
				</div>
				<div id="left-item3" class="left-item" target='list-view3'>
					<span class="item-img3"></span>
					<p>
						田园时蔬
					</p>
				</div>
				<div id="left-item4" class="left-item" target='list-view4'>
					<span class="item-img4"></span>
					<p>
						绿色禽蛋
					</p>
				</div>
			</div>
			<div class="right">
				<div class="top"></div>
				<div id="list-view1" class="list-item display">
					<div class="list-view">
						<img src="../image/icon-img5.png" />
						<p>
							进口水果
						</p>
						<span class="aui-iconfont aui-icon-right"></span>
					</div>
					<div class="list-view">
						<img src="../image/icon-img6.png" />
						<p>
							国产水果
						</p>
						<span class="aui-iconfont aui-icon-right"></span>
					</div>
				</div>
				<div id="list-view2" class="list-item">
					<div class="list-view">
						<img src="../image/img1.png" />
						<p>
							进口海鲜
						</p>
						<span class="aui-iconfont aui-icon-right"></span>
					</div>
					<div class="list-view">
						<img src="../image/img3.png" />
						<p>
							国产海鲜
						</p>
						<span class="aui-iconfont aui-icon-right"></span>
					</div>
					<div class="list-view">
						<img src="../image/img7.png" />
						<p>
							进口海鲜
						</p>
						<span class="aui-iconfont aui-icon-right"></span>
					</div>
				</div>
				<div id="list-view3" class="list-item">
					<div class="list-view">
						<img src="../image/img2.png" />
						<p>
							进口蔬菜
						</p>
						<span class="aui-iconfont aui-icon-right"></span>
					</div>
					<div class="list-view">
						<img src="../image/img4.png" />
						<p>
							国产蔬菜
						</p>
						<span class="aui-iconfont aui-icon-right"></span>
					</div>
				</div>
				<div id="list-view4" class="list-item">
					<div class="list-view">
						<img src="../image/img5.png" />
						<p>
							进口禽蛋
						</p>
						<span class="aui-iconfont aui-icon-right"></span>
					</div>
					<div class="list-view">
						<img src="../image/img6.png" />
						<p>
							国产禽蛋
						</p>
						<span class="aui-iconfont aui-icon-right"></span>
					</div>
					<div class="list-view">
						<img src="../image/img8.png" />
						<p>
							国产禽蛋
						</p>
						<span class="aui-iconfont aui-icon-right"></span>
					</div>
				</div>
			</div>
		</div>
        <footer class="aui-nav" id="footer">
            <ul class="aui-bar-tab">
                <li><a href="../html/frame_tab_1.html">
                    <span class="footer-icon footer-icon1"></span>
                    <p>
                        首页
                    </p></a>
                </li>
                <li class="active">

                        <span class="footer-icon footer-icon2"></span>
                        <p>
                            产品分类
                        </p>
                </li>
                <li> <a href="../html/frame_tab_3.html">
                    <span class="footer-icon footer-icon3"></span>
                    <p>
                        购物车
                    </p></a>
                </li>
                <li><a href="../html/frame_tab_4.html">
                    <span class="footer-icon footer-icon4"></span>
                    <p>
                        个人中心
                    </p></a>
                </li>
            </ul>
        </footer>
    </div>
	</body>
	<script type="text/javascript" src="../script/api.js"></script>
	<script type="text/javascript" src="../script/zepto.min.js"></script>
	<script type="text/javascript">
        window.onload=function(){
            setTimeout(function(){
                $('.mask').css('display','none');
                $('#main').css('opacity','1');
            },250)
        };
	function openSearchWin(){
        window.location.href='../html/search.html'
	}
	$('.left-item').click(function(){
		$('.left-item').removeClass('actives');
		$('.list-item').css('display','none');
		$(this).addClass('actives');
		var a = $(this).attr('target');
		$('#'+a+'').css('display','block')
	});
	$('.list-view').click(function(){
        window.location.href='../html/product_tab1.html'
	})
	</script>
</html>